<!--
 @Description 直播轮播组件
 @author hemengxia
 @date 2022/11/5
-->

<template>
  <section
    class="live-swipe-main"
    :style="{ 'margin-top': top, 'padding-left': paddingLeftRight,'padding-right': paddingLeftRight,'height':height}"
  >
    <van-swipe :show-indicators="indicators" :stop-propagation="false" :autoplay="autoplay" loop class="swipe-box">
      <van-swipe-item v-for="(item,i) in list" :key="i" class="box-item">
<!--        <p class="tag">{{ item.roomStatusValues }}</p>-->
        <label-comp v-if="labelObj!==undefined" :label-list="item.labelList"></label-comp>
        <van-image :src="item.imagesUrl" :fit="imgType">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img src="../../images/base/default-placeholder.png" alt="">
          </template>
        </van-image>
        <div class="time pl20">
          {{ `${formatTime(item.liveStartTime, 4)} 至 ${formatTime(item.liveEndTime, 4)}` }}
        </div>
        <div class="desc pl20">{{ item.liveName }}</div>
      </van-swipe-item>
    </van-swipe>
  </section>
</template>
<script>
import mixins from './../mixins'
import bannerMixins from '@/components/CustomPage/apps/widget/banner/mixins'
import LabelComp from "@/components/CustomPage/apps/widget/labelComp";
export default {
  name: 'VLiveSwiper',
  mixins: [mixins, bannerMixins],
  components:{LabelComp},
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      swiper: null,
      list: [],
      defaultList: [
        {
          liveStartTime: '2020-11-1',
          liveEndTime: '2020-11-1',
          liveName: '直播标题',
          imagesUrl: ''
        },{
          liveStartTime: '2020-11-1',
          liveEndTime: '2020-11-1',
          liveName: '直播标题',
          imagesUrl: ''
        }],
      id: '',
      autoplay: '',
      labelObj:undefined
    }
  },
  computed: {
    indicators() {
      return this.option.indicators
    }
  },
  watch: {
    isAutoPlay(newVal, oldVal) {
      if(newVal) {
        this.autoplay = this.delayTime
      } else {
        this.autoplay = 0
      }
    },
    delayTime(newVal, oldVal) {
      if(newVal >= 0) {
        this.autoplay = this.option.delayTime * 1000
      } else {
        this.autoplay = 0
      }
    }
  },
  async created() {
    if (this.isAutoPlay) {
      this.autoplay = this.delayTime
    } else {
      this.autoplay = 0
    }
    if (this.isInitData) {
      this.labelObj =  await this.getLabelList()
      await this.getDataByCode('configList')
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    formatTime(time, num) {
      if (!time) {
        return
      }
      const d = new Date(time.replace(/-/g, '/'))
      if (num === 3) {
        return (
          d.getFullYear() + '年' +
            (d.getMonth() + 1) +
            '月' +
            d.getDate() +
            '日'
        )
      } else if (num === 4) {
        return (
          d.getFullYear() + '年' +
            (d.getMonth() + 1) +
            '月' +
            d.getDate() +
            '日' + ' ' + (d.getHours() < 10 ? `0${d.getHours()}` : `${d.getHours()}`) + ':' + (d.getMinutes() < 10 ? `0${d.getMinutes()}` : `${d.getMinutes()}`)
        )
      } else {
        return (
          (d.getMonth() + 1) +
            '月' +
            d.getDate() +
            '日'
        )
      }
    },
    setData(result) {
      for (const key in result) {
        if (key === 'configList') {
          // 获取系统配置
          let arr = []
          const ids = []
          if (result?.configList) {
            arr = JSON.parse(result?.configList?.data?.configValue)
            arr.forEach(item => {
              if (item.type === '1' && item.id) { // 系统内直播
                ids.push(item.id)
              }
            })
            this.id = ids.join(',')
            this.getDataByCode('dataList')
          }
        } else if (key === 'dataList') {
          // 获取直播数据
          if (result[key].code === '200') {
            this.list = result[key].data || []
            if(this.labelObj!==undefined){
              this.setLabel(this.list,'list')
            }
          } else {
            this.$message.error(result[key].msg || '服务器内部错误！')
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/utility/rem.scss';

.live-swipe-main {
  z-index: 2;
  min-height: rem(580);
  display: flex;
  max-width: rem(750);
  flex-direction: column;

  .swipe-box {
    border-radius: rem(16);
    flex: 1;
    background: #fff;
    .box-item {
      width: 100%;
      height: 100%;
      position: relative;

      .tag {
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: rem(130);
        height: rem(46);
        background: #cba365;
        border-radius: rem(16) 0 rem(16) 0;
        font-size: rem(24);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        color: #ffffff;
      }

      > .van-image {
        width: 100%;
        height: rem(368);
        background: #f8f8f9;
        border-radius: rem(16) rem(16) 0 0;
        overflow: hidden;

        img {
          height: 100%;
          width: 100%;
          border-radius: rem(16) rem(16) 0 0;
        }
        .van-image__error {
          > img {
            width: rem(120);
            height: rem(120);
          }

        }
      }

      .pl20 {
        padding-left: rem(23);
      }

      .time {
        padding-top: rem(24);
        font-size: rem(24);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
      }

      .desc {
        margin-top: rem(18);
        font-size: rem(30);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: left;
        color: #333333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }

      .subscribe {
        margin-top: rem(18);
        font-size: rem(26);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        color: #444444;

        > span {
          display: inline-block;
        }

        .img {
          vertical-align: middle;
          margin-right: rem(15);

          > img {
            width: rem(22);
            height: rem(28);
          }
        }
      }

      .l-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: rem(30);
        bottom: rem(32);
        width: rem(132);
        height: rem(54);
        @include bg-color($mainColor);
        border-radius: rem(27);
        font-size: rem(24);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
      }
    }
    /deep/.van-swipe__indicator--active{
      @include bg-color($mainColor);
    }
  }
}
</style>
